<template>
  <div id="haha">
    <router-link to="/foo/first">ButtonFirst</router-link>
    </br>
    <router-link to="/user/second">ButtonSecond</router-link>
    </br>
    <router-link to="/moregrid">DoubleGrid</router-link>
    </br>
    <router-link to="/bar">AjaxTable</router-link>
    </br>
    <router-link to="/test">Go to test.vue</router-link>
    </br>
    <router-link to="/total">Vue Computed Total</router-link>
    <br>
    <router-link to="/estest">ES6 async await simple example</router-link>

    <transition name="bounce">
      <div align="center">
        <router-view></router-view>
      </div>
    </transition>
  </div>
</template>

<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter, .fade-leave-active {
    opacity: 0
  }

  .bounce-enter-active {
    animation: bounce-in .5s;
  }

  .bounce-leave-active {
    animation: bounce-out .5s;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes bounce-out {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(0);
    }
  }
</style>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
